<template>
	<view class="power-plan-container">
		<view class="title">
			<view class="left-title">水表用水量环比统计</view>
			<view class="btn">
				<uv-subsection :list="list" mode="button" :current="current" @change="change" activeColor="#3c9cfe"
					bgColor="#ffffff"></uv-subsection>

			</view>
		</view>
		<view class="content">
			<!-- <view style="width: 100%; height: 408px;"> -->
			<l-echart ref="chartRef" @finished="init"></l-echart>
			<!-- </view> -->
		</view>
	</view>
</template>

<script setup>
	// #ifdef H5
	import * as echarts from '@/node_modules/echarts/dist/echarts.esm.js';
	// #endif
	import {
		reqPlanEletric,
		reqRealityElectric
	} from "@/api/model/photovoltaic"
	import {
		tradtionWaterStatistics
	} from "@/api/model/trandition"
	// console.log("echarts", echarts);
	import {
		onMounted,
		reactive,
		ref,
	} from "vue";

	const current = ref(0)
	const list = ref(['月', '年'])

	const option = {
		legend: {},
		tooltip: {
			// 鼠标悬浮提示框显示 X和Y 轴数据
			trigger: "axis",
			backgroundColor: "rgba(32, 33, 36,.7)",
			borderColor: "rgba(32, 33, 36,0.20)",
			borderWidth: 1,
			textStyle: {
				// 文字提示样式
				color: "#fff",
				fontSize: "12",
			},
		},
		grid: {
			top: "10%",
			left: "14%",
			bottom: "7%",
			right: "2%",
		},
		xAxis: [{
			type: "category",
			data: [],
		}, ],
		yAxis: [{
			name: "吨",
			type: "value",
		}, ],
		series: [],
	}
	const change = (index) => {
		current.value = index
		getUseWaterEcharts(index)
	}
	// const chartRef = ref < LEchartComponentPublicInstance | null > (null);
	const chartRef = ref(null);
	const init = async () => {
		if (chartRef.value == null) return
		// #ifdef APP
		const chart = await chartRef.value.init(null);
		// #endif
		// #ifdef H5
		const chart = await chartRef.value.init(echarts, null);
		// #endif
		chart.setOption(option);
	}



	// 水表用水量环比统计 type : 0:月； 1:年
	const getUseWaterEcharts = (type) => {
			tradtionWaterStatistics("2", type).then(({
					data
				}) => {
					console.log(data, "2");
					let res = data.data
					var xAxis = [];
					var series1 = [];
					var series2 = [];
					res[0].list.forEach((item1) => {
						xAxis.push(item1.time);
						series1.push(item1.value);
					});
					res[1].list.forEach((item2) => {
						series2.push(item2.value);
					});
					option.xAxis[0].data = xAxis;
					option.series = [{
							type: "bar",
							name: res[0].time,
							smooth: true,
							barWidth: 10, //柱状图柱子宽度
							showSymbol: false,
							itemStyle: {
								// 使用方法二的写法
								color: {
									type: "linear",
									x: 0, // 右
									y: 0, // 下
									x2: 0, // 左
									y2: 1, // 上
									colorStops: [{
											offset: 0,
											color: "#23D7C7", // 0% 处的颜色
										},

										{
											offset: 1,
											color: "#9FF4C8", // 100% 处的颜色
										},
									],
								},
							},
							data: series1,
						},
						{
							type: "bar",
							name: res[1].time,
							smooth: true,
							barWidth: 10, //柱状图柱子宽度
							showSymbol: false,
							itemStyle: {
								// 使用方法二的写法
								color: {
									type: "linear",
									x: 0, // 右
									y: 0, // 下
									x2: 0, // 左
									y2: 1, // 上
									colorStops: [{
											offset: 0,
											color: "#38A6FF", // 0% 处的颜色
										},

										{
											offset: 1,
											color: "#9FEFF4", // 100% 处的颜色
										},
									],
								},
							},
							data: series2,
						},
					];
				
				init()
				});
		}

		onMounted(() => {
			getUseWaterEcharts(0)
		})
</script>

<style lang="scss" scoped>
	.power-plan-container {
		width: 100%;
		border-radius: 10px;
		background-color: #ffffff;
		margin: 20rpx 0;
		padding-bottom: 20rpx;

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-title {
				height: 76rpx;
				margin-left: 46rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 76rpx;
			}

			.btn {
				margin-right: 30rpx;

				::v-deep {
					.uv-subsection__item {
						flex: initial !important;
						/* 使用 !important 强制覆盖组件库的默认样式 */
						width: 70rpx;
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						text-align: center;
					}

					.uv-subsection__item--0 {
						.uv-subsection__item__text {
							width: 50rpx;
							border-right: 1px solid #cccccc;
						}
					}
				}
			}
		}

		.content {
			.echart {
				width: 100%;
				height: 300px;
			}
		}
	}
</style>